<template>
	<view>
		<view>抄表年月：{{resp.meterDate | smartTime('YY/mm')}}</view>
		<view class="horizontal card" style="margin-top: 40rpx;justify-content: space-around;">
			<view style="text-align: center;">
				<view style="color: #333333;font-size: 36rpx;font-weight: 400;">{{resp.roomNum}}</view>
				<view style="font-size: 26rpx; color: #666666;">户数</view>
			</view>
			<view style="text-align: center;">
				<view style="color: #2E62E2;font-size: 36rpx;font-weight: 400;">{{resp.finishNum}}</view>
				<view style="font-size: 26rpx; color: #666666;">已抄</view>
			</view>
			<view style="text-align: center;">
				<view style="color: #F68D1C;font-size: 36rpx;font-weight: 400;">{{unchaoed}}</view>
				<view style="font-size: 26rpx; color: #666666;">未抄</view>
			</view>
		</view>
		<navigator :url="`../chaobiao_detail/chaobiao_detail?task=${item.id}&court=${item.courtId}&name=${item.courtName}`" 
		v-for="(item, idx) in resp.meterCourtVoList" :key="idx" class="card item">
			<view>{{item.courtName}}</view>
			<view class="vertical">
				<view>户数：{{item.roomNum}}</view>
				<view>未抄：{{item.roomNum - item.finishNum}}</view>
			</view>
		</navigator>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		components: {
			
		},
		filters:{
			month(date){
				if(!date){
					return ''
				}
				const dateObj = new Date(date)
				if(!dateObj){
					return ''
				}
				return `${dateObj.getFullYear()}-${dateObj.getMonth()+1}`;
			},
		},
		computed:{
			unchaoed(){
				return this.resp.roomNum - this.resp.finishNum
			}
		},
		onShow() {
			this.update()
		},
		onLoad(opts) {
			
		},
		data() {
			return {
				resp: {
					id: '', // 任务ID
					meterDate: "", // 抄表日期
					roomNum: 0,
					finishNum: 0,
					// 只查询10条 调用-> 根据任务获取小区任务列表 得到剩余小区
					meterCourtVoList: [
						
					]
				},
				date: new Date().toLocaleDateString(),
				count: 0,
				chaoed: 0,
			}
		},
		methods: {
			update() {
				uni.showLoading({
					title:'加载中...'
				})
				uni.request({
					header: {
						Authorization: 'Bearer ' + app.globalData.token,
					},
					url: app.globalData.domain + "waterMeterTask",
					data: {},
					fail: (err) => {
						console.error(err)
					},
					success: (res) => {
						const {data} = res
						uni.hideLoading()
						if (data.code == 200) {
							console.log(data.data)
							this.resp = data.data
						} else if (data.code == 500) {
							uni.showToast({
								icon: 'none',
								title: data.message,
							});
						}
					}
				})
			}
		}
	}
</script>

<style scoped>
	.item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 700rpx;
		background-color: #fff;
		margin-top: 20rpx;
		padding: 32rpx 42rpx;
		border-radius: 10px;
	}
</style>
